<template>
  <div>
    <!--条件栏-->
    <el-form ref="form" :model="Form" label-width="80px">
      <el-form-item label="选择时间" prop="startTime">
        <el-date-picker
          v-model="Form.startTime"
          type="daterange"
          format="yyyy-MM-dd "
          value-format="yyyy-MM-dd"
          clearable
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <span>供应商:</span>
        <el-input v-model="Form.supplierName" style="width: 150px;" clearable placeholder="请输入内容" ></el-input>
        <el-button  style="margin-left: 7%" type="primary" @click="verification">查询</el-button>
        <el-button type="primary" @click="dialogFormVisible = true">添加入库</el-button>
        <!--弹窗框-->
        <el-dialog style="margin-left: 20px" title="添加入库" :visible.sync="dialogFormVisible"  width="34%"
                   center>
          <el-form ref="form" :rules='rules' :model="subForm" label-width="80px">
            <el-form-item label="入库时间" :label-width="formLabelWidth" prop="inputTime" >
              <el-date-picker
                v-model="subForm.inputTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                clearable
                @blur="getSupplier">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="供应商" :label-width="formLabelWidth" prop="supplierName">
              <el-select v-model="subForm.supplierName" @change="getGoodsType(subForm.supplierName)" clearable placeholder="请选择" >
                <el-option
                  v-for="item in subForm.select1"
                  :key="item.supplierId"
                  :label="item.supplierName"
                  :value="item.supplierId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品种类" :label-width="formLabelWidth" prop="goodsName">
              <el-select v-model="subForm.goodsName" @change="getGoodsName(subForm.goodsName)" clearable placeholder="请选择">
                <el-option
                  v-for="item in subForm.select2"
                  :key="item.goodsListId"
                  :label="item.goodsListType"
                  :value="item.goodsListId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品类型" :label-width="formLabelWidth" prop="goodsType">
              <el-select v-model="subForm.goodsType" clearable  placeholder="请选择">
                <el-option
                  v-for="item in subForm.select3"
                  :key="item.goodsListType"
                  :label="item.goodsListType"
                  :value="item.goodsListType">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item  label="商品数量" :label-width="formLabelWidth" prop="goodsNum">
              <el-input style="width: 225px"  v-model="subForm.goodsNum" clearable placeholder="请输入内容"
                        maxLength='9'  ></el-input>
            </el-form-item>
            <el-form-item label="单位" :label-width="formLabelWidth" prop="goodsUnit">
              <el-select v-model="subForm.goodsUnit" @change="getWarehouseName" clearable placeholder="请选择">
                <el-option
                  v-for="item in subForm.select4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="仓库" :label-width="formLabelWidth" prop="goodsType">
              <el-select v-model="subForm.warehouseName" clearable  placeholder="请选择">
                <el-option
                  v-for="item in subForm.select5"
                  :key="item.warehouseId"
                  :label="item.warehouseName"
                  :value="item.warehouseId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <!--          <el-button  style="margin-left: 7%" type="primary" @click="verification">确认入库</el-button>-->
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" >
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addHousing">确 定</el-button>
          </div>
        </el-dialog>
      </el-form-item>
    </el-form>
    <div>
      <!--表格-->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
          width="50">
        </el-table-column>
        <el-table-column
          prop="inputTime"
          label="入库时间"
          width="160"
          >
        </el-table-column>
        <el-table-column
          prop="supplierName"
          label="供应商"
          >
        </el-table-column>
        <el-table-column
          prop="goodsType"
          label="商品分类"
          >
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="商品名称"
          >
        </el-table-column>
        <el-table-column
          prop="goodsNum"
          label="商品数量"
          >
        </el-table-column>
        <el-table-column
          prop="goodsUnit"
          label="商品单位"
          >
        </el-table-column>
        <el-table-column
          prop="warehouseName"
          label="仓库名"
          >
        </el-table-column>
        <el-table-column
          prop="modifyTime"
          label="最后修改时间"
          width="160"
          >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">移除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <!--
      size-change：选择每页显示几行
      current-change：上一页 下一页
      current-page：当前页
      page-sizes：一页显示多少行的集合
      page-size：一页显示多少行
      total：总条数
           -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=page
        :page-sizes="[5, 10, 15, 20]"
        :page-size=size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'WarehouseMange',
    mounted() {//默认第一次加载
      initTable(this)
    },
    data () {
      return {
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          }
        },
        tableData: [],
        total: 0,
        page: 1,
        size: 5,
        Form:{
          startTime:'',
          overTime:'',
          select6:''
        },
        dialogFormVisible: false,
        formLabelWidth: '120px',
        subForm: {
          inputTime: '',
          supplierName: '',
          goodsName: '',
          goodsType: '',
          goodsNum: '',
          goodsUnit: '',
          warehouseName:'',
          select1:[],
          select2:[],
          select3:[],
          select4: [
            {
              value: '件',
              label: '件'
            }
          ],
          select5:[]
        },
        rules: {
          inputTime: [
            {
              required: true,
              message: '时间不能不选择',
              trigger: 'blur'
            }
          ],
          supplierName: [
            {
              required: true,
              message: '供应商必须选',
              trigger: ['blur', 'change']
            }
          ],
          goodsName: [
            {
              required: true,
              message: '商品的种类必须选',
              trigger: ['blur', 'change']
            }
          ],
          goodsType: [
            {
              required: true,
              message: '商品的类型必须选',
              trigger: ['blur', 'change']
            }
          ],
          goodsNum: [
            {
              required: true,
              message: '商品的数量必须填',
              trigger: 'blur'
            }
          ],
          goodsUnit: [
            {
              required: true,
              message: '商品的单位必须选',
              trigger:  ['blur', 'change']
            }
          ],
          warehouseName: [
            {required: true,
              message: '商品的类型必须选',
              trigger: ['blur', 'change']}
          ]
        }
      }
    },
    methods: {
      verification () {
        if (this.Form.startTime.toString().split(",")[0]==this.Form.startTime.toString().split(",")[1]){
          this.$message("温馨提示：开始日期和结束日期不能一致，请重新选择！")
          return false
        }
        initTable(this)
      },
      //以下是表格部分的方法
      indexMethod(index) {
        return index + 1
      },
      handleSizeChange(val) {
        this.size = val
        initTable(this)
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.page = val
        initTable(this)
        console.log(`当前页: ${val}`)
      },
      //数据表格移除的方法
      handleDelete(index, row){
        this.$confirm('是否确认移除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post("delInput", {
            inputId:row.inputId,
            stateListId:3,
            warehouseId:row.warehouseId,
            supplierId:row.supplierId,
            goodsType:row.goodsType,
            goodsName:row.goodsName,
            goodsNum:row.goodsNum
          }).then(resp =>{
            if (resp.data=="移除成功"){
              this.$message.success(resp.data)
              initTable(this)
              return false
            }
            this.$message.error(new Error(resp.data))
          })
        }).catch(() => {
          //几点取消的提示
        });
      },
      //以下是数据添加的方法
//确认添加入库
      addHousing () {
        if (this.subForm.inputTime == null || this.subForm.inputTime === '') {
          this.$message.error(new Error('时间不能不选择'))
          return false
        }
        if (this.subForm.supplierName == null || this.subForm.supplierName === '') {
          this.$message.error(new Error('供应商必须选'))
          return false
        }
        if (this.subForm.goodsName == null || this.subForm.goodsName === '') {
          this.$message.error(new Error('商品的种类必须选'))
          return false
        }
        if (this.subForm.goodsType == null || this.subForm.goodsType === '') {
          this.$message.error(new Error('商品的类型必须选'))
          return false
        }
        if (this.subForm.goodsNum == null || this.subForm.goodsNum === '') {
          this.$message.error(new Error('商品的数量必须填'))
          return false
        }else{
          let r = /^[1-9]\d*$/;
          if (!r.test(this.subForm.goodsNum)){
            this.$message.error(new Error('商品的数量必须为正整数(0除外)'))
            return false
          }
        }
        if (this.subForm.goodsUnit == null || this.subForm.goodsUnit === '') {
          this.$message.error(new Error('商品的单位必须填'))
          return false
        }
        if (this.subForm.warehouseName == null || this.subForm.warehouseName === '') {
          this.$message.error(new Error('仓库必选选取'))
          return false
        }
        //添加的数据发往后台
        this.$axios.post("addWarehouseData", {
          // params:{
          inputTime:this.subForm.inputTime,
          supplierId:this.subForm.supplierName,
          goodsListId:this.subForm.goodsName,
          goodsName:this.subForm.goodsType,
          goodsNum:this.subForm.goodsNum,
          goodsUnit:this.subForm.goodsUnit,
          warehouseId:this.subForm.warehouseName
          // }
        }).then(resp => {
          if (resp.data=='入库成功') {
            this.$message.success(resp.data)
            this.dialogFormVisible=false;
            initTable(this)
          }else{
            this.$message.error(new Error(resp.data))
          }
        })



      },
      //获取供应商的方法
      getSupplier () {
        this.$axios.post('getSupplier').then(resp => {
          if (resp) {
            // console.log(resp.data.supplierList)
            this.subForm.select1=resp.data.supplierList
            // console.log(this.subForm.select1)
          }
        })
      },
      //获得商品的种类
      getGoodsType(value){
        // console.log(value)
        this.$axios.post("getGoodsType", {
          supplierId:value
        }).then(resp => {
          if (resp) {
            // console.log(resp.data.goodsList)
            this.subForm.select2=resp.data.goodsList
            // console.log(this.subForm.select1)
          }
        })
      },
      //获得商品的名称
      getGoodsName(val){
        this.$axios.post("getGoodsName", {
          goodsListPid:val
        }).then(resp => {
          if (resp) {
            // console.log(resp.data.goodsList)
            this.subForm.select3=resp.data.goodsList
            // console.log(this.subForm.select1)
          }
        })
      },
      //获取仓库名的方法：
      getWarehouseName(){
        this.$axios.post("getWarehouseName").then(resp => {
          if (resp) {
            // console.log(resp.data.goodsList)
            this.subForm.select5=resp.data.warehouseNameList
            // console.log(this.subForm.select1)
          }
        })
      }
    }
  }
  function initTable($this) {
    $this.$axios.post("getWarehousing", {
      page: $this.page,
      size: $this.size,
      startTime:$this.Form.startTime.toString().split(",")[0],
      overTime:$this.Form.startTime.toString().split(",")[1],
      supplierName:$this.Form.supplierName
    }).then(resp => {
      if (resp) {
        $this.tableData = resp.data.warehousing
        $this.total = resp.data.count
      }
    })
  }

</script>

<style scoped>

</style>
